<template lang="html">
  <div class="dramaBox">
    <el-row class="formBox box1">
      <el-col :span="2" class="text-right headLable">
        <span>所在省份：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select size="small" clearable v-model="city" placeholder="请选择" class="text">
          <el-option v-for="item in options" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>剧场名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="dramaName" size="small" class="text" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
      <el-col :span="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
      </el-col>
      <el-col :span="2" :offset="16" class="text-left">
         <el-button type="success" size="small" @click="changeTanContent(7)">＃新增剧场</el-button>
      </el-col>
    </el-row>

    <el-row class="box3" v-loading.body="$store.state.TanMerchants.loading">
      <ul class="listBox4">
          <li class="first">
            <span class="choose gray">选择</span>
            <span class="name gray">剧场名</span>
            <span class="city gray">所在城市</span>
            <span class="numb gray">座位数量</span>
            <span class="zone gray">分区</span>
            <span class="pic gray">座位图</span>
            <span class="type green">操作</span>
          </li>
          <el-checkbox-group v-model="checkList">
            <li v-for="item in this.$store.state.TanMerchants.dramaList">
              <span class="choose text-left">
                <el-checkbox :label="item.id" ></el-checkbox>
              </span>
              <span class="name text-left">{{item.name}}</span>
              <span class="city text-left ">{{item.cityName}}</span>
              <span class="numb text-left">{{item.seatCount}}</span>
              <span class="zone">{{item.areaNames}}</span>
              <span class="pic text-left green">编辑座位图</span>
              <span class="type green" @click="changeTanContent(8,item.id)">编辑</span>
            </li>
          </el-checkbox-group>
      </ul>
    </el-row>
    <el-row style="padding:10px;">
      <el-col :span="2" class="text-left">
        <el-button type="danger" size="small" @click="delet">删除</el-button>
      </el-col>
      <el-col :span="10" :offset="12" class="text-right">
        共{{this.$store.state.TanMerchants.total}}条
        <span style="display:inline-block; min-width:100px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :page-count="$store.state.TanMerchants.pages">
          </el-pagination>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
var url;
export default {
  data(){
    return {
      city:'',
      page:1,
      checkList:[],
      dramaName:'',
      options: [{
        name: '四川省',
        code: 510000
      }, {
        name: '浙江省',
        code: 330000
      }, {
        name: '上海市',
        code: 310000
      },{
        name: '重庆市',
        code: 500000
      }]
    }
  },
  methods:{
    delet:function (){
      this.$store.dispatch('showLoading','TanMerchants');
      var str='';
      for(let i in this.checkList){
        str=str+this.checkList[i]+',';
      }
      str=str.substring(0,str.length-1);
      console.log(str);
      axios.get(url+'/v1/businessmen/delete/theater',{
        params:{
          id:str
        }
      }).then((res)=>{
        this.getList();
      }).catch((err)=>{
        this.loading=false;
      })
    },
    find:function (){
      this.getList();
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanMerchants');
      var json1={
        provinceCode:this.city,
        name:this.dramaName,
        pageCount:10,
        pageIndex:this.page
      };
      this.$store.dispatch('getMerchantsDrama',json1);
    },
    handleCurrentChange:function (){
      this.getList();
    },
    changeTanContent:function (type,id){
      if(type==7){
        var title='新增剧场';
      }else if(type==8){
        var title='编辑剧场';
      }
      console.log(id);
      var json1={
        'type':type,
        'name':'TanMerchants',
        'id':id,
        'title':title
      }
      this.$store.dispatch('changeDialog',json1);
    },
  },
  created(){
    url=this.$store.state.url;
    this.getList();
  }
}
</script>

<style lang="Sass">
.dramaBox{
  .el-checkbox__label{display: none;}
}
</style>
<style lang="Sass" scoped>
.dramaBox{
  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 12px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px; margin: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 10px 10px 10px 10px; margin: 0px 10px ;}
  .box3{margin: 20px 10px 10px 10px; background: #fff; padding: 10px; box-sizing: border-box; border-radius: 10px;
    .cell{text-align: left;}
  }
  .btn{height: 32px; padding: 0 10px;
    span{line-height: 0px;  }
  }
  .tanBox{
    .el-dialog--small{min-width: 650px;}
    .el-dialog__header{text-align: left;}
  }
  .el-tag{line-height: 24px; margin-left: 10px;}

}
.listBox4{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0 5px; background: #fff !important;

      span{display: inline-block; font-size: 12px;}
      .choose{flex: 0 0 60px; height: auto;}
      .name{flex: 0 0 300px;}
      .about{flex: 0 0 150px;}
      .city{flex: 0 0 120px;}
      .numb{flex: 0 0 150px;}
      .zone{flex: 1;}
      .pic{flex: 0 0 200px;}
      .type{flex: 0 0 50px;}

  }
  li{display: flex; height: auto; line-height: 30px;  text-align: left; padding: 10px 5px; box-sizing: border-box;

    span{display: inline-block; box-sizing: border-box; line-height: 14px;}
    .choose{flex: 0 0 60px; height: auto;}
    .name{flex: 0 0 300px;}
    .about{flex: 0 0 150px;}
    .city{flex: 0 0 120px;}
    .numb{flex: 0 0 150px;}
    .zone{flex: 1;}
    .pic{flex: 0 0 200px;}
    .type{flex: 0 0 50px; cursor: pointer;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}

}
</style>
